<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vocabulary</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/toast.css" type="text/css">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script src="js/plugins/toast.js"></script>
<script type="text/javascript" src="js/favourite.js"></script>

<!-- Bat cac su kien button click tren inteface -->
<script type="text/javascript">
	//xu ly lesson list in panel
	$(document).ready(function() {
		var action = getUrlVars()["action"];
		switch (action) {
		case 'vocabulary':
			$("#title-page").text('Danh sách từ vựng yêu thích');
			$("#content ul").attr('id', 'vocabulary-favourite');
			$("#warning").text('Bạn có muốn xóa từ này khỏi danh sách yêu thích không');
			break;
		case 'kanji':
			$("#title-page").text('Danh sách Hán tự yêu thích');
			$("#content ul").attr('id', 'kanji-favourite');
			$("#warning").text('Bạn có muốn xóa từ này khỏi danh sách yêu thích không');
			break;
		case 'reading':
			$("#title-page").text('Danh sách bài đọc yêu thích');
			$("#content ul").attr('id', 'reading-favourite');
			$("#warning").text('Bạn có muốn xóa bài đọc này ra khỏi danh sách yêu thích không');
			break;
		case 'grammar':
			$("#title-page").text('Danh sách ngữ pháp yêu thích');
			$("#content ul").attr('id', 'grammar-favourite');
			$("#warning").text('Bạn có muốn xóa mẫu ngữ pháp này khỏi danh sách yêu thích không');
			break;
		case 'listening':
			$("#title-page").text('Danh sách bài nghe yêu thích');
			$("#content ul").attr('id', 'listening-favourite');
			$("#warning").text('Bạn có muốn xóa bài nghe này khỏi danh sách yêu thích không');
			break;
		}
		connectDB(action);
	});
</script>

<style type="text/css">
#ui-icon-favourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}

#wrap {
	text-align: center
}

#wrap span {
	display: inline-block;
	text-align: left;
	text-indent: 50px;
	font-family: "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 14px;
	font-weight: normal;
}

#wrap span.kanji,span.mean_kanji {
	width: 180px;
}

#wrap span.mean_vi,span.mean_en {
	width: 280px;
}

#wrap span {
	display: inline;
}

#wrap>span {
	display: inline-block;
}
</style>

</head>

<body id="page">
	<div data-role="page" data-title="Vocabulary">
		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			<a  href="index.html" data-ajax="false"  class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
			<h1 id="title-page">
				<center></center>
			</h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">
			<!-- show content -->
			<div id="favourite-result">
				<!-- vocabulary -->
				<div id="content" data-role="collapsibleset" data-theme="a"
					data-content-theme="b">
					<!-- <ol data-role="listview" id="vocabulary-lesson" class="ui-listview"> -->
					<ul data-role="listview" data-filter="true"
						data-filter-placeholder="Search word..." data-inset="true">

						<!-- <li><a href="kanji_detail.html?id=6" data-ajax="false"
							data-direction="reverse"
							class="ui-btn ui-btn-icon-right ui-icon-carat-r"> <span
								id="wrap"><span class="kanji"
									style="font-weight: bold; font-size: 18px; margin-left: -50px;">姉</span><span
									class="mean_kanji"
									style="text-transform: uppercase; font-weight: bold; font-size: 16px;">TY</span><span
									class="mean_vi">Chi</span> <span class="mean_en">elder
										sister</span></span></a>
							<div class="ui-block-b"
								style="position: absolute; top: -2px; right: 5px;">
								<a href="#remove-favourite" data-theme="a" data-rel="popup"
									data-position-to="window" data-transition="pop"
									data-role="button" data-iconpos="notext"
									class="ui-link ui-btn ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child"
									role="button">remove favourite</a></li> -->
									



						<!-- vocabulary	<li style="height: 80px;"
							class="ui-li-static ui-body-inherit ui-first-child ui-last-child"><fieldset
								class="ui-list-a">
								<div class="ui-block-a"
									style="position: absolute; top: 7px; right: 60px; left: 45px;">
									<h5 class="kanji" style=" margin-left: -20px;float: left; display: block">日本</h5>
									<h3  style="float: right; font-size: 12px; margin-top: 15px; display: block">
										<span class="mean_kanji" style="text-transform: uppercase;">Nhật Bản</span> <br><br>
										<span class="mean_en" >japan</span>
									</p>
									</h3>
									<p class="hiragana"
										style="float: left; clear: both; margin-left: -20px;margin-top: -40px; display: block;">
										<span>&nbsp;</span><span>にほん</span>
									</p>
									
									<p class="mean_vi"
										style="float: left; clear: both; margin-left: -20px;margin-top: -20px; display: block;">
										<span>&nbsp;</span><span>Nhật Bản</span>
									</p>
									<p class="lesson" style="float: left; clear: both; margin-left: -20px;margin-top: -5px;display:block;"><span>&nbsp;</span><span>Lesson 1</span></p>
								</div>
								<div class="ui-block-b"
									style="position: absolute; top: -2px; right: 5px;">
									<div data-role="controlgroup" data-type="vertical"
										style="width: 30px;"
										class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
										<div class="ui-controlgroup-controls ">
											<a href="#remove-favourite" data-theme="a" data-rel="popup" data-position-to="window" data-transition="pop"
												data-role="button" data-iconpos="notext"
												class="ui-link ui-btn ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child"
												role="button">remove favourite</a>
											<a id="noteDialog" data-role="button" href="#write-note" data-theme="a" data-rel="popup" data-position-to="window" data-transition="pop"
												data-iconpos="notext" data-icon="edit"
												role="button">Edit</a>
										</div>
									</div>
								</div>
							</fieldset></li> -->
					</ul>

					<!-- dialog popup remove-->
					<div data-role="popup" id="remove-favourite" data-theme="a"
						data-overlay-theme="b" class="ui-content"
						style="max-width: 340px; padding-bottom: 2em;">
						<h3></h3>
						<div id="warning"></div>
						<br>
						<center>
							<a id="removeFavouriteOK" href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
							<a id="removeFavouriteCacel" href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Cancel</a>
						</center>
					</div>

					<!-- dialog popup rememeber-->
					<div data-role="popup" id="write-note" data-theme="a"
						data-overlay-theme="b" class="ui-content"
						style="max-width: 340px; padding-bottom: 2em;">
						<h3>Rememeber</h3>
						<div>
							<textarea cols="40" rows="25" name="textarea" id="note-content"></textarea>
							<br> <br> <a id="writeNoteOK" href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
							<a href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Cancel</a>
							</center>
						</div>
					</div>
					<!-- /End vocabulary -->

					<!-- kanji -->
					<ol data-role="listview" id="kanji-favourite" class="split-list">
					</ol>
					<!-- /end kani -->

					<!-- grammar -->
					<ol data-role="listview" id="grammar-favourite" class="split-list">
					</ol>
					<!-- end grammar -->
				</div>
				<!-- End show content -->
			</div>
			<!-- /content -->
		</div>
</body>
</html>